<!-- 文章列表 -->
<template>
    <el-row class="sharelistBox">
        <el-col :span="24" class="s-item tcommonBox " v-for="item in articleList" :key="item.id">
            <span class="s-round-date">
                <span class="month" v-html="showInitDate(item.time,'month')+'月'"></span>
                <span class="day" v-html="showInitDate(item.time,'date')"></span>
            </span>
            <header>
                <h1>
                    <a :href="'/detailShare?aid='+item.id" target="_blank">
                        {{item.name}}
                    </a>
                </h1>
                <h2>
                    <i class="fa fa-fw fa-user el-icon-s-custom"></i>{{item.user}} 发表于
                    <i class="fa fa-fw fa-clock-o el-icon-time"></i><span v-html="showInitDate(item.time,'all')"></span> •
                    <i class="fa fa-fw fa-eye el-icon-view"></i>{{item.pageView}} 次围观 •

                </h2>
                <div class="ui label">
                    <a :href="'#/Share?classId='+item.class_id">{{item.categoryName}}</a>
                </div>
            </header>
            <div class="article-content">
                <p style="text-indent:2em;">
                    {{item.summary}}
                </p>
                <p  style="max-height:300px;overflow:hidden;text-align:center;">
<!--                    <img :src="item.thumbnail" alt="" class="maxW">-->
<!--                    <img :src="item.thumbnail" alt="" class="maxW">-->
                </p>
            </div>
            <div class="viewdetail">
                <a class="tcolors-bg" :href="'/detailShare?aid='+item.id" target="_blank">
                    阅读全文>>
                </a>
            </div>
            <cbNav></cbNav>

        </el-col>
         <el-col class="viewmore">
            <a v-show="hasMore" class="tcolors-bg" href="javascript:void(0);" @click="addMoreFun">点击加载更多</a>
            <a v-show="!hasMore" class="tcolors-bg" href="javascript:void(0);">暂无更多数据</a>
        </el-col>
    </el-row>
</template>

<script>
import {initDate} from '../utils/server.js'
import {articleList} from '../api/article'
    export default {
        
        name:'Share',
        data() { //选项 / 数据
            return {
                // 查询参数
                pageNum: 1,
                pageSize: 10,
                categoryId: 0,
                name: "",
                articleList:[],
                hasMore:true,

            }
        },

        methods: { //事件处理器
            showInitDate: function(oldDate,full){
              return initDate(oldDate,full)
            },
            getList(){

              this.request.get("/article/page",{
                params:{
                  pageNum: this.pageNum,
                  pageSize: this.pageSize,
                  name: this.name,
                }
              }).then(res =>{
                if(res.code === "200"){
                  this.articleList = res.data.data
                  this.total = res.data.total
                }else {
                  this.$message.error(res.msg)
                }
              })
            },
            showSearchShowList:function(initData){//展示数据
                if(initData){
                    this.articleList = []

                }
                this.getList()
            },
            addMoreFun:function(){//查看更多
                this.showSearchShowList(false);
            },
            routeChange:function(){
            }
        },
        components: { //定义组件

        },
        watch: {
           // 如果路由有变化，会再次执行该方法
           '$route':'routeChange',
           '$store.state.keywords':'routeChange'
         },
        created() { //生命周期函数
            // console.log(this.$route);

            this.routeChange();
            this.getList();

        }
    }
</script>

<style>

/*分享标题*/
.shareTitle{
    margin-bottom: 40px;
    position: relative;
    border-radius: 5px;
    background: #fff;
    padding:15px;
}
.shareclassTwo{
    width:100%;
}
.shareclassTwo li{
    display: inline-block;
}
.shareclassTwo li a{
    display: inline-block;
    padding:3px 7px;
    margin:5px 10px;
    color:#fff;
    border-radius: 4px;
    background: #64609E;
    border: 1px solid #64609E;
    transition: transform 0.2s linear;
    -webkit-transition: transform 0.2s linear;
}
.shareclassTwo li a:hover{
    transform: translate(0,-3px);
    -webkit-transform: translate(0,-3px);
}
.shareclassTwo li a.active{
    background: #fff;
    color:#64609E;

}




/*文章列表*/
    .sharelistBox{
        transition: all 0.5s ease-out;
        font-size: 15px;
    }


    /*.sharelistBox .viewmore a:hover,.s-item .viewdetail a:hover{
        background: #48456C;
    }*/
</style>
